<template>
  <div class="layout-container">
    <!-- 左侧菜单 -->
    <div class="sidebar">
      <el-menu
        class="sidebar-menu"
        :default-active="activeMenu"
        router
      >
        <el-menu-item index="/">
          <el-icon><i class="el-icon-s-home"></i></el-icon>
          <span>首页</span>
        </el-menu-item>
        
        <el-menu-item index="/tav">
          <el-icon><i class="el-icon-connection"></i></el-icon>
          <span>测试Axios</span>
        </el-menu-item>
        
        <el-menu-item index="/zxyf">
          <el-icon><i class="el-icon-data-analysis"></i></el-icon>
          <span>测试智学云帆Axios</span>
        </el-menu-item>
        
        <el-menu-item index="/stream">
          <el-icon><i class="el-icon-refresh"></i></el-icon>
          <span>测试流式响应</span>
        </el-menu-item>
        
        <el-menu-item index="/chat">
          <el-icon><i class="el-icon-chat-dot-round"></i></el-icon>
          <span>在线聊天</span>
        </el-menu-item>
        
        <el-sub-menu index="editors">
          <template #title>
            <el-icon><i class="el-icon-edit-outline"></i></el-icon>
            <span>富文本编辑器</span>
          </template>
          <el-menu-item index="/richtext">Quill编辑器</el-menu-item>
          <el-menu-item index="/tinymce">简易编辑器</el-menu-item>
          <el-menu-item index="/ckeditor">CKEditor编辑器</el-menu-item>
          <el-menu-item index="/tiptap">TipTap编辑器</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    
    <!-- 右侧内容区 -->
    <div class="content-area">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 当前激活的菜单项
const activeMenu = computed(() => {
  return route.path
})
</script>

<style scoped>
.layout-container {
  display: flex;
  height: calc(100vh - 64px - 46px); /* 减去header和footer的高度 */
  overflow: hidden;
}

.sidebar {
  width: 240px;
  border-right: 1px solid #ebeef5;
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
}

.sidebar-menu {
  border-right: none;
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
    height: auto;
  }
  
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ebeef5;
  }
}
</style> 